import React, { Fragment } from 'react';
import { connect } from 'dva';
import { Form, Input, Button } from 'antd';
import { routerRedux } from 'dva/router';
import styles from './style.less';
import { getQueryString } from '../../../utils/utils';

const { TextArea } = Input;

const formItemLayout = {
  labelCol: {
    span: 5,
  },
  wrapperCol: {
    span: 19,
  },
};

@Form.create()
class Step1 extends React.PureComponent {
  componentDidMount() {
    const { dispatch } = this.props;
    const articleId = getQueryString(this.props.location.search, 'id');
    if (articleId && articleId !== 'null') {
      dispatch({
        type: 'article/fatchArticle',
        payload: articleId,
      });
    }else{
      // 没有传入id的时候，则说明不是修改
      dispatch({
        type: 'article/clearStepData',
      });
    }
  }
  render() {
    const { form, dispatch, data, currentUser } = this.props;
    const { getFieldDecorator, validateFields } = form;
    const onValidateForm = () => {
      validateFields((err, values) => {
        const newValues = values;
        if(!data.author_id && data.author_id !== 'null'){
          newValues.author_id = currentUser.author_id;
        }
        if (!err) {
          dispatch({
            type: 'article/saveStepFormData',
            payload: newValues,
          });
          dispatch(routerRedux.push(`/article/pub-article/content?id=${data.id}`));
        }
      });
    };
    return (
      <Fragment>
        <Form layout="horizontal" className={styles.stepForm} hideRequiredMark>
          <Form.Item {...formItemLayout} label="标题">
            {getFieldDecorator('title', {
              initialValue: data.title,
              rules: [
                { required: true, message: '请输入文章标题' },
                {
                  pattern: /^.{20,200}$/,
                  message: '字数限制在20~200之间',
                },
              ],
            })(<Input placeholder="请输入标题" />)}
          </Form.Item>
          <Form.Item {...formItemLayout} label="简介">
            {getFieldDecorator('intro', {
              initialValue: data.intro,
              rules: [
                { required: true, message: '请输入文章简介' },
                {
                  pattern: /^.{20,255}$/,
                  message: '字数限制在50~255之间',
                },
              ],
            })(<TextArea placeholder="请输入简介" autosize={{ minRows: 2, maxRows: 5 }} />)}
          </Form.Item>
          <Form.Item {...formItemLayout} label="作者">
            {getFieldDecorator('author', {
              initialValue: data.author?data.author:currentUser.nickname,
              rules: [{ required: true, message: '请输入文章作者' }],
            })(<Input placeholder="请输入作者" />)}
          </Form.Item>
          <Form.Item
            wrapperCol={{
              xs: { span: 24, offset: 0 },
              sm: {
                span: formItemLayout.wrapperCol.span,
                offset: formItemLayout.labelCol.span,
              },
            }}
            label=""
          >
            <Button onClick={onValidateForm}>下一步</Button>
          </Form.Item>
        </Form>
      </Fragment>
    );
  }
}

export default connect(({ article, user }) => ({
  data: article.step,
  currentUser : user.currentUser,
}))(Step1);
